<!doctype html>
<head>
    <title>Mercator projection</title>
    <script src="../dist/threebox.js" type="text/javascript"></script>
    <script src="config.js"></script>

    <script src='https://api.mapbox.com/mapbox-gl-js/v0.50.0/mapbox-gl.js'></script>
    <link href='https://api.mapbox.com/mapbox-gl-js/v0.50.0/mapbox-gl.css' rel='stylesheet' />
    <style>
        body, html { 
            width: 100%;
            height: 100%;
            margin: 0;
        }
        #map { 
            width: 100%;
            height: 100%;
        }
    </style>
</head>
<body>
    <div id='map' class='map'></div>

    <script>

        // this example demonstrates the use of duplicate(), to replicate a sphere many times with minimal performance implications. Also shows the distortion effects of mercator: despite their appearance, all spheres have a radius of 500km, at an altitude of 2000km.

        if(!config) console.error("Config not set! Make a copy of 'config_template.js', add in your access token, and save the file as 'config.js'.");
        
        mapboxgl.accessToken = config.accessToken;

        var map = new mapboxgl.Map({
          container: 'map',
          style: 'mapbox://styles/mapbox/light-v9',
          zoom: 0,
          pitch: 45,
          bearing: 45
        });


        map.on('style.load', function() {

            map.addLayer({
                id: 'custom_layer',
                type: 'custom',
                onAdd: function(map, mbxContext){

                    window.tb = new Threebox(
                        map, 
                        mbxContext,
                        {defaultLights: true}
                    );

                    // generate 100 points around the world, at random locations but the same altitude
                    var randomPoints = [];

                    for (var i = 0; i < 100; i++){

                        var point = [
                            360 * (Math.random()-0.5), 
                            160 * (Math.random()-0.5),
                            2000000
                        ]
                        
                        randomPoints.push(point);
                    }

                    // build a template sphere sized in meters, such that it will appear to scale with its local surroundings
                    sphereTemplate = tb.sphere(
                        {
                            radius: 500000,
                            units: 'meters',
                            sides: 120,
                            color: 'purple',
                            material: 'MeshPhysicalMaterial'
                        }
                    )

                    // for best performance, clone the template sphere for each point in randomPoint

                    randomPoints.forEach(function(pt){

                        newSphere = sphereTemplate
                            .duplicate()
                            .setCoords(pt);

                        tb.add(newSphere);

                    })

                },
                
                render: function(gl, matrix){
                    tb.update();
                }
            });
        });

    </script>
</body>